<template>
	<view class="draw-page-container">
		<u-navbar title="抽题详情" :autoBack="true" :border="false" bgColor="#fff" />

		<scroll-view class="content" scroll-y>
			<!-- 顶部信息栏 -->
			<view class="header-info">
				<text class="time">9:41</text>
				<text class="title">{{ noteName }}</text>
			</view>

			<!-- 筛选题型 -->
			<view class="filter-section">
				<text class="filter-title">抽题方式</text>
				<view class="filter-options">
					<view class="filter-option" :class="{active: !drawTypeSwitch}" @click="setDrawType(false)">
						顺序抽题
					</view>
					<view class="filter-option" :class="{active: drawTypeSwitch}" @click="setDrawType(true)">
						随机抽题
					</view>
				</view>
			</view>

			<!-- 抽题结果 -->
			<view v-if="loading" class="loading-container">
				<view class="loading-animation"></view>
				<text class="loading-text">加载中...</text>
			</view>
			<view v-if="topic" class="topic-card">
				<view class="topic-header">
					<text class="topic-no">📌 题号: {{ topic.topicNo }}</text>
				</view>
				<view class="topic-content">
					<text class="question">📝 {{ topic.topic }}</text>
				</view>
				<view class="answer-section">
					<text class="answer-label">🗒️ 答案</text>
					<text class="answer-content">{{ topic.answer || '暂无答案' }}</text>
				</view>
				<view class="answer-section">
					<text class="answer-label">💡 提示</text>
					<text class="answer-content">{{ topic.prompt || '暂无提示' }}</text>
				</view>
			</view>
			<view v-else class="no-data-container">
				<!-- <image src="/static/no-data.png" class="no-data-image" mode="widthFix" /> -->
				<text class="no-data-text">暂无题目，试试切换抽题方式或者刷新页面吧~</text>
			</view>


			<!-- 底部按钮 -->
			<view class="bottom-fixed-bar">
				<scroll-view scroll-x class="bottom-btn-scroll">
					<button class="bar-btn secondary" @click="toggleFavorite">重点标记</button>
					<button class="bar-btn secondary" @click="upSign">上上签</button>
					<button class="bar-btn primary" @click="draw">抽</button>
					<button class="bar-btn secondary" @click="downSign">下下签</button>
					<!-- <button class="bar-btn secondary" @click="viewExplanation">📖 解析</button> -->
				</scroll-view>
			</view>

		</scroll-view>

	</view>
</template>

<script>
	import dataApi from '@/api/data.js'
	export default {
		data() {
			return {
				userId: null,
				noteId: null,
				noteName: '',
				userType: null,
				noteType: '', // 0-系统 1-用户
				drawType: 1, // 默认顺序抽题
				topicNo: 1,
				topic: null,
				drawTypeSwitch: false, // false=顺序，true=随机

				loading: true, // 维护一个 loading 状态
			}
		},
		async onLoad(options) {
			this.noteId = options.noteId;
			this.noteName = options.noteName;
			this.noteType = options.noteType; // 笔记类型 0-系统笔记 1-用户笔记
			this.userId = uni.getStorageSync('userId');
			this.userType = uni.getStorageSync('bindType');
			await this.currentDraw();
		},
		methods: {

			// 重点题目标记
			toggleFavorite() {
				uni.showToast({
					title: '重点题目标记功能待接入',
					icon: 'none'
				});
				// 请求重点题目标记接口保存笔记题目
			},

			// 设置抽题类型
			setDrawType(isRandom) {
				this.drawTypeSwitch = isRandom;
				if (this.drawTypeSwitch === true) {
					this.drawType = 2;
				} else {
					this.drawType = 1;
				}
			},

			// 上上签
			async upSign() {
				try {
					const params = {
						userId: this.userId,
						drawType: this.drawType,
						userType: this.userType,
						topicNo: this.topicNo,
					}
					if (this.noteType === '0') {
						params.systemNoteIds = [Number(this.noteId)];
					} else {
						params.userNoteIds = [Number(this.noteId)];
					}
					const res = await dataApi.upSign(params);
					if ((res?.data?.code === 200 && res?.data?.data === null) || res?.data?.code !== 200) {
						uni.showToast({
							title: res?.data?.message,
							icon: 'none'
						});
					}
					if (res?.data?.code === 200) {
						this.topic = res.data.data;
						this.topicNo = this.topic.topicNo;
					} else {
						uni.showToast({
							title: res?.data?.message || '无法获取上一题',
							icon: 'none'
						});
					}
				} catch (err) {
					console.error('网络请求异常：', err); // 👈 关键行
					uni.showToast({
						title: res?.data?.message || "系统异常",
						icon: 'fail'
					});
				}
			},

			// 下下签
			async downSign() {
				try {
					const params = {
						userId: this.userId,
						drawType: this.drawType,
						userType: this.userType,
						topicNo: this.topicNo,
					}
					if (this.noteType === '0') {
						params.systemNoteIds = [Number(this.noteId)];
					} else {
						params.userNoteIds = [Number(this.noteId)];
					}
					const res = await dataApi.downSign(params);
					if ((res?.data?.code === 200 && res?.data?.data === null) || res?.data?.code !== 200) {
						uni.showToast({
							title: res?.data?.message,
							icon: 'fail'
						});
					}
					if (res?.data?.code === 200) {
						this.topic = res.data.data;
						this.topicNo = this.topic.topicNo;
					} else {
						uni.showToast({
							title: res?.data?.message || '无法获取下一题',
							icon: 'fail'
						});
					}
				} catch (err) {
					console.error('网络请求异常：', err); // 👈 关键行
					uni.showToast({
						title: res?.data?.message || "系统异常",
						icon: 'fail'
					});
				}
			},

			// 抽题
			async draw() {
				try {
					const params = {
						userId: this.userId,
						drawType: this.drawType,
						userType: this.userType
					}
					if (this.noteType === '0') {
						params.systemNoteIds = [Number(this.noteId)];
					} else {
						params.userNoteIds = [Number(this.noteId)];
					}
					const res = await dataApi.draw(params);
					if ((res?.data?.code === 200 && res?.data?.data === null) || res?.data?.code !== 200) {
						uni.showToast({
							title: res?.data?.message,
							icon: 'fail'
						});
					}
					if (res?.data?.code === 200) {
						this.topic = res.data.data;
						this.topicNo = this.topic.topicNo;
					} else {
						uni.showToast({
							title: res?.data?.message,
							icon: 'fail'
						});
					}
				} catch (err) {
					console.error('网络请求异常：', err); // 👈 关键行
					uni.showToast({
						title: res?.data?.message || "系统异常",
						icon: 'fail'
					});
				}
			},

			// 查询当前抽题题目
			async currentDraw() {
				this.loading = true;
				try {
					const params = {
						userId: this.userId,
						drawType: this.drawType,
						userType: this.userType,
					};
					if (this.noteType === '0') {
						params.systemNoteIds = [Number(this.noteId)];
					} else {
						params.userNoteIds = [Number(this.noteId)];
					}
					const currentRes = await dataApi.currentDraw(params);
					// 当前没有抽题记录的话直接再抽
					if ((currentRes?.data?.code === 200 && currentRes?.data?.data === null)) {
						const drawRes = await dataApi.draw(params);
						if (drawRes?.data?.code === 200 && drawRes?.data?.data !== null) {
							this.topic = drawRes.data.data;
							this.topicNo = this.topic.topicNo;
						}else {
							uni.showToast({
								title: drawRes?.data?.message,
								icon: 'fail'
							});
						}
					}
					else if (currentRes?.data?.code === 200 && currentRes?.data?.data) {
						this.topic = currentRes.data.data;
						this.topicNo = this.topic.topicNo;
					} else {
						this.topic = null; // 显式设为 null，避免上次残留
						this.topicNo = null;
						// 可以弹个提示
						uni.showToast({
							title: currentRes?.data?.message || '暂无题目',
							icon: 'fail'
						});
					}
				} catch (err) {
					console.error('网络请求异常：', err); // 👈 关键行
					uni.showToast({
						title:  err?.message || '暂无题目',
						icon: 'fail'
					});
				} finally {
					this.loading = false;
				}
			}


		}
	}
</script>

<style scoped lang="scss">
	.draw-page-container {
		background-color: #f7f8fa;
		min-height: 100vh;
		display: flex;
		flex-direction: column;
	}

	// 设置可滚区域高度
	.content {
		padding: 24rpx;
		padding-bottom: 180rpx;
		box-sizing: border-box;
		height: calc(100vh - 140rpx); // 留出底部按钮区域
	}
	
	
	.header-info {
		margin-bottom: 32rpx;

		.time {
			font-size: 28rpx;
			color: #bbb;
			margin-bottom: 6rpx;
		}

		.title {
			font-size: 38rpx;
			font-weight: 600;
			color: #333;
		}
	}


	// 顺序随机选择ui
	.filter-section {
		background: rgba(255, 255, 255, 0.9); // 半透明白，轻盈感
		border-radius: 16rpx;
		padding: 28rpx 20rpx;
		margin-bottom: 32rpx;
		box-shadow: 0 6rpx 16rpx rgba(0, 0, 0, 0.02); // 非强阴影，更自然

		.filter-title {
			font-size: 30rpx;
			color: #d9822b;
			margin-bottom: 24rpx;
			font-weight: 500;
		}

		.filter-options {
			display: flex;
			justify-content: space-between;

			.filter-option {
				flex: 1;
				text-align: center;
				padding: 20rpx 0;
				font-size: 28rpx;
				background: #f7f7f7;
				color: #555;
				border-radius: 12rpx;
				margin: 0 10rpx;
				transition: all 0.3s;
				backdrop-filter: blur(2rpx); // 模拟玻璃感
				border: 1rpx solid rgba(0, 0, 0, 0.05); // 非强边框，几乎无感

				&.active {
					background: #d6d6d6; // 深灰强调，不用颜色也有层次
					color: black;
					font-weight: 600;
					box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.08);
				}
			}
		}
	}



	.topic-card {
		background: #ffffff;
		border-radius: 16rpx;
		box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.03);
		overflow: hidden;
		margin-bottom: 24rpx;

		.topic-header {
			padding: 24rpx;
			border-bottom: 1rpx solid #f0f0f0;

			.topic-no {
				font-size: 30rpx;
				color: #fa541c;
				font-weight: 600;
			}
		}

		.topic-content {
			padding: 24rpx;

			.question {
				font-size: 32rpx;
				color: #333;
				line-height: 1.8;
			}
		}

		.answer-section {
			background: #f9f9f9;
			padding: 24rpx;
			border-top: 1rpx solid #eee;

			.answer-label {
				font-size: 28rpx;
				margin-right: 20rpx;
				font-weight: bold;
				color: #999;
				margin-bottom: 12rpx;
			}

			.answer-content {
				font-size: 30rpx;
				color: #333;
				line-height: 1.7;
			}
		}
	}

	.loading-container {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 100rpx 0;

		.loading-text {
			margin-top: 20rpx;
			font-size: 28rpx;
			color: #999;
		}
	}



	.bottom-btn-scroll::-webkit-scrollbar {
		display: none;
	}

	.bottom-fixed-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background: rgba(255, 255, 255, 0.9); // 半透明白底
		backdrop-filter: blur(6rpx); // 模拟玻璃感
		padding: 16rpx 12rpx;
		box-shadow: 0 -4rpx 10rpx rgba(0, 0, 0, 0.04); // 顶部投影更自然
		z-index: 999;
	}

	.bottom-btn-scroll {
		display: flex;
		flex-direction: row;
		white-space: nowrap;
		overflow-x: scroll;
		padding-bottom: env(safe-area-inset-bottom); // 兼容 iPhone 刘海
	}

	.bar-btn {
		flex: none;
		margin-right: 16rpx;
		padding: 20rpx 36rpx;
		font-size: 28rpx;
		border-radius: 48rpx;
		border: none;
		transition: all 0.2s ease;
	}

	.bar-btn.secondary {
		background: #f2f3f5;
		color: #333;
	}

	.bar-btn.primary {
		background: #d6d6d6; // 深灰色主按钮
		color: black; // 按钮字体颜色
		font-weight: 600;
		box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
	}


	/* 点击动效 */
	.bar-btn:active {
		transform: scale(0.96);
	}


	/* 暂无题目相关ui */
	.no-data-container {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 100rpx 0;
		color: #999;
	}

	.no-data-image {
		width: 180rpx;
		height: 180rpx;
		margin-bottom: 20rpx;
		opacity: 0.5;
	}

	.no-data-text {
		font-size: 28rpx;
		text-align: center;
		line-height: 1.4;
	}
</style>